<template>
  <div class="side-nav">
    <div class="side-nav-top">
        <div class="lotterys">
          <div class="wrapper hover-style" 
            v-for="(lottery,index) in sideNavData.lotterys" 
            :key="lottery.id"
            :class="activeTabIndex == index ? 'active' : ''"
            @mouseenter="handleMouseEnter(index)"
            @mouseleave="handleMouseLeave"
            >
            <div class="nav-items-wrapper" v-show="activeTabIndex == index">
              <nav-items :lotterys="lottery.subLotterys"></nav-items>
            </div>
            <div 
              class="side-nav-item lottery" 
              >
              <div class="item-left">
                <span class="icon">
                  <i class="iconfont" :class="lottery.icon"></i>
                </span>
              </div>
              <div class="item-center">
                <span 
                  class="lottery-type" 
                  :class="value.highlight ? 'highlight-news-event' : ''"
                  v-for="value in lottery.navItem" 
                  :key="value.id"
                >
                  {{value.name}}
                </span>
              </div>
              <div class="item-right hover-style">
                <div class="arrow-right" ></div>
              </div>
            </div>
          </div>
        </div>
        <div class="others">
          <div 
            class="side-nav-item games" 
            v-for="item in sideNavData.others" 
            :key="item.id"
            >
            <div class="navitems">
              <span 
                class="navitem hover-style" 
                v-for="value in item.navItem" 
                :key="value.id"
              >
                {{value.name}}
              </span>
            </div>
          </div>
        </div>
    </div>
    <div class="side-nav-bottom">
      <div class="text">
        <span>随时随地</span>
        <span>任性畅玩</span>
      </div>
      <div class="mobile-end">
        <span class="icon hover-style">
          <i class="iconfont iconsy_kehuduan_ios"></i>
        </span>
        <span class="icon hover-style">
          <i class="iconfont iconsy_kehuduan_android"></i>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import NavItems from './components/nav-items'
export default {
  components: {
    NavItems
  },
  props: {
    sideNavData: {
      type: Object,
      defautl: function() {
        return {
          lotterys: [
            {
            id: 1,
            navItem: [
              {
                id: 1,
                name: "时时彩",
                
              },
              {
                id: 2,
                name: '最火爆的快彩'
              }
            ],
            subLotterys: [
              {
                id: 1,
                tab: '时时彩',
                type: '重庆时时彩',
                dateNo: '119217',
                drawTime: new Date().getTime() + 10000,
                bg: require('@/assets/imgs/caizhong_bj_01.svg'),
                icon: 'iconicon_chongqingshishi',
                path: '/select-number/shishicai'
              },
              {
                id: 2,
                tab: '时时彩',
                type: '急速时时彩',
                dateNo: '119217',
                drawTime: new Date().getTime() + 10000,
                bg: require('@/assets/imgs/caizhong_bj_01.svg'),
                icon: 'iconicon_jisushishicai'
              },
              {
                id: 3,
                tab: '时时彩',
                type: '天津时时彩',
                dateNo: '119217',
                drawTime: new Date().getTime() + 10000,
                bg: require('@/assets/imgs/caizhong_bj_02.svg'),
                icon: 'iconicon_tianjinshishica'
              },
              {
                id: 4,
                tab: '时时彩',
                type: '新疆时时彩',
                dateNo: '119217',
                drawTime: new Date().getTime() + 10000,
                bg: require('@/assets/imgs/caizhong_bj_04.svg'),
                icon: 'iconicon_xinjiangshishic'
              },
            ],
            icon: 'iconindex_shishicai'
            },
            {
              id: 2,
              navItem: [
                {
                  id: 1,
                  name: "赛车",
                  
                },
                {
                  id: 2,
                  name: '彩友中200注'
                }
              ],
              subLotterys: [
                    {
                      id: 1,
                      tab: '赛车',
                      type: '北京赛车',
                      dateNo: '119217',
                      drawTime: new Date().getTime() + 10000,
                      imgUrl: '',
                      path: '/select-number/bjracer',
                      bg: require('@/assets/imgs/caizhong_bj_06.svg'),
                      icon: 'iconicon_jisupk'
                    },
                    {
                      id: 2,
                      tab: '赛车',
                      type: '幸运飞艇',
                      dateNo: '119217',
                      drawTime: new Date().getTime() + 10000,
                      imgUrl: '',
                      bg: require('@/assets/imgs/caizhong_bj_02.svg'),
                      icon: 'iconCZ_Icon_xingyunfeiti'
                    },
                    {
                      id: 3,
                      tab: '赛车',
                      type: '极速赛车',
                      dateNo: '119217',
                      drawTime: new Date().getTime() + 10000,
                      imgUrl: '',
                      bg: require('@/assets/imgs/caizhong_bj_01.svg'),
                      icon: 'iconCZ_Icon_beijingsaich'
                    },
                    {
                      id: 4,
                      tab: '赛车',
                      type: '极速飞艇',
                      dateNo: '119217',
                      drawTime: new Date().getTime() + 10000,
                      imgUrl: '',
                      bg: require('@/assets/imgs/caizhong_bj_02.svg'),
                      icon: ''
                    },
                  ],
              icon: 'iconindex_saiche'
            },
            {
              id: 3,
              navItem: [
                {
                  id: 1,
                  name: "11选5",
                  
                },
                {
                  id: 2,
                  name: '4500万派奖'
                }
              ],
              subLotterys: [
                    {
                      id: 1,
                      tab: '11选5',
                      type: '山东11选5',
                      dateNo: '119219',
                      drawTime: new Date().getTime() + 10000,
                      bg: require('@/assets/imgs/caizhong_bj_08.svg'),
                      icon: 'iconicon_shandongxuan'
                    },
                    {
                      id: 2,
                      tab: '11选5',
                      type: '广东11选5',
                      dateNo: '119219',
                      drawTime: new Date().getTime() + 10000,
                      bg: require('@/assets/imgs/caizhong_bj_07.svg'),
                      icon: 'iconicon_guangdongxuan'
                    },
                    {
                      id: 3,
                      tab: '11选5',
                      type: '急速11选5',
                      dateNo: '119219',
                      drawTime: new Date().getTime() + 10000,
                      path: '/select-number/11xuan5',
                      bg: require('@/assets/imgs/caizhong_bj_01.svg'),
                      icon: 'iconCZ_Icon_jisuxuan'
                    },
                  ],
              icon: 'iconindex_xuan'
            },
            {
              id: 4,
              navItem: [
                {
                  id: 1,
                  name: "快三"
                },
                {
                  id: 2,
                  name: '投掷筛子'
                },
                {
                  id: 3,
                  name: '轻松中奖品'
                }
              ],
              subLotterys: [
                {
                  id: 1,
                  type: '幸运快三',
                  tab: '快三',
                  dateNo: '119219',
                  drawTime: new Date().getTime() + 10000,
                  bg: require('@/assets/imgs/caizhong_bj_03.svg'),
                  icon: 'iconLy_kuai_xingyun',
                  path: '/select-number/kuaisan'
                },
                {
                  id: 2,
                  tab: '快三',
                  type: '安徽快三',
                  dateNo: '119219',
                  drawTime: new Date().getTime() + 10000,
                  imgUrl: '',
                  bg: require('@/assets/imgs/caizhong_bj_04.svg'),
                  icon: 'iconicon_anhuikuaisan'
                },
                {
                  id: 3,
                  tab: '快三',
                  type: '甘肃快三',
                  dateNo: '119219',
                  drawTime: new Date().getTime() + 10000,
                  imgUrl: '',
                  bg: require('@/assets/imgs/caizhong_bj_08.svg'),
                  icon: 'iconLy_kuai_gansu'
                },
              ],
              icon: 'iconindex_kuai'
            },
          ],
          others: [
            {
              id: 5,
              navItem: [
                {
                  id: 1,
                  name: "AG视讯国际厅",
                  active: true
                },
                {
                  id: 2,
                  name: '旗舰厅'
                },
                {
                  id: 3,
                  name: '欧洲厅'
                },
                {
                  id: 4,
                  name: '竟咪'
                },
                {
                  id: 5,
                  name: '包桌'
                },
                {
                  id: 6,
                  name: '多台'
                }
              ],
              icon: '',
              high: 'true',
              color: 'yellow'
            },
            {
              id: 6,
              navItem: [
                {
                  id: 1,
                  name: "AG电子"
                },
                {
                  id: 2,
                  name: '皇冠体育'
                },
                {
                  id: 3,
                  name: '斗牛'
                }
              ],
              icon: '',
              high: true,
              color: 'red'
            }
          ]
        }
      }
    }
  },
  data() {
    return {
      activeTabIndex: -1
    }
  },
  created() {
  },
  methods: {
    handleMouseEnter(index) {
      this.activeTabIndex = index 
    },
    handleMouseLeave() {
      this.activeTabIndex = -1 
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
.side-nav
  width 260px
  height 474px
  .side-nav-top
    display flex
    flex-direction column
    width 100%
    height 390px
    background #222836
    box-sizing border-box
    .lotterys 
      width 100%
      .wrapper 
        width 100% 
        position relative 
        &.active 
          background #cca566
          .side-nav-item 
            border-bottom none 
            &.lottery 
              .item-center 
                .lottery-type 
                  color #fff !important 
              .item-right 
                display none
        .nav-items-wrapper  
          position absolute
          left 260px 
          top 0
          background #fff 
          z-index 10
        .side-nav-item
          display flex
          flex-wrap wrap
          align-items center
          color #fff
          width 220px
          margin 0 auto
          box-sizing border-box
          border-bottom 1px solid #333A40
          &.lottery 
            height 60px
            .item-left 
              width 36px 
              height 36px
              margin-right 10px
              .icon 
                .iconfont 
                  font-size 36px
                  color #FAD9B1
                  background-image: -webkit-linear-gradient(0deg,rgba(#FAD9B1, 1),rgba(#FEFAE0,1));
                  -webkit-background-clip text
                  -webkit-text-fill-color transparent
            .item-center
              box-sizing border-box 
              .lottery-type 
                color #8c8f98
                &:first-child 
                  color #ccc
                  margin-right 5px
            .item-right
              flex 1
              display flex 
              justify-content flex-end
              .arrow-right 
                width 10px
                height 10px 
                border-bottom 1px solid #3F464D
                border-right 1px solid #3F464D
                transform rotate(-45deg)
    .others 
      .side-nav-item 
        width 220px
        display flex 
        margin 0 auto
        align-items center
        box-sizing border-box 
        &.games 
          height 74px
          color #8c8f98
          &:first-child 
            border-bottom 1px solid #333A40
            .navitems
              .navitem 
                &:first-child 
                  color $color-highlight-yellow
          &:last-child 
            .navitems
              .navitem 
                display inline-block
                padding-right 10px
                &:first-child 
                  color $color-theme-red
          .navitems
            width 100%
            margin-left 40px
            .navitem 
              display inline-block
              padding 5px  
  .side-nav-bottom
    width 100%
    height 84px
    background rgba(204,165,102,1)
    .text
      width 100%
      height 12px 
      line-height 12px 
      color #FFF6D6
      text-align center
      // margin 0 auto
      padding-top 17px
    .mobile-end 
      margin 0 auto
      display flex 
      width 84px
      margin-top 12px
      .icon 
        width 32px 
        height 32px
        line-height 32px
        text-align center
        border-radius 50%
        border 1px solid rgba(#FFF6D6, 0.5)
        box-sizing border-box
        &:last-child 
          margin-left 20px
        .iconfont 
          font-size 18px
          color #FAD9B1

        
      
</style>